<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="d3.v2.min.js"></script>

    <style type="text/css">
      circle {
        fill: #02709F;
      }

      svg {
        font: 10px sans-serif;
      }
      .link {
        fill: none;
        stroke: #ccc;
        stroke-width: 1.5px;
      }


      .chart div {
        font: 10px sans-serif;
        background-color: steelblue;
        text-align: right;
        padding: 3px;
        margin: 1px;
        color: white;
      }
    </style>

    <link rel="stylesheet" type="text/css" media="print" href="print.css">

  </head>
  <body>

    <div id="test">
      </div>

    <script type="text/javascript">

  var svg = d3.select("#test").append("svg")
     .attr("class", "svg")
     .attr("title", "test2")
     .attr("width", 600)
     .attr("height", 300);

     var layout = d3.layout.tree().size([330,300]);

var diagonal = d3.svg.diagonal()
  // change x and y (for the left to right tree)
  .projection(function(d) { return [d.y + 100, d.x]; });


  d3.json("json/ip", function(data) {
      console.log(data);
      var nodes = layout.nodes(data);
      var links = layout.links(nodes);

      var link = svg.selectAll("pathlink")
      .data(links)
      .enter().append("svg:path")
      .attr("class", "link")
      .attr("d", diagonal)


      var node = svg.selectAll("g.node")
      .data(nodes)
      .enter().append("svg:g")
      .attr("transform", function(d) { return "translate(" + (d.y + 100) + "," + d.x +  ")"; })


      // Add the dot at every node
      node.append("svg:circle")
      .attr("r", 5);

  // place the name atribute left or right depending if children
  node.append("svg:text")
    .attr("dx", function(d) { return d.children ? -8 : 8; })
    .attr("dy", 3)
    .attr("font-size", "small") 
    .attr("text-anchor", function(d) { return d.children ? "end" : "start"; })
    .text(function(d) { return d.name; });


         });

 
//TODO: set hover to display properties

    </script>

  </body>
</html>
